import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/components/home'
import about from '@/components/about'
import user from '@/components/user'
import qiantao from '@/components/qiantao'
import phone from '@/components/phone'
import tablet from '@/components/tablet'
import computer from '@/components/computer'
import params from '@/components/params'
import tran from '@/components/tran'
import Error from '@/components/Error'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/home',
      name: 'home',
      component: home
    },{
      path: '/about',
      name: 'about',
      alias:'/jspang',   // 别名 通过重给个名字跳转 相对于重定向链接不会被污染更方便用户观看  别名不要用在 path:"/" 中 
      component: about
    },
    {
      path:'/user/:id',
      component:user
    },
    {
      path:'/qiantao/:id',
      component:qiantao,
      children:[
        {
          path:'phone',
          component:phone
        },
        {
          path:'tablet',
          component:tablet
        },
        {
          path:'computer',
          component:computer
        },
        {
          path:'',
          component:computer
        },
      ]
    },
    { // 单页面多路由
      path:'/multRoute',
      components:{
        default:HelloWorld,
        left:about,
        right:user
      }
    },
    {  // 利用url进行传参  可以在里面写正则表达限制传递内容
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:params,
      beforeEnter:(to,from,next)=>{  // 在路由配置文件中只有这个钩子可用 在路由魔板中有两个
        console.log('我进入了params模板');
        console.log(to);  // 之后的vue
        console.log(from); // 之前的vue
        next(true);  // 表示是否进行下一步 有true false 两个参数
        
      }
    },
    { // 路径设置不一致但是想要调到同个页面的时候使用重定向
      path:'/goback',
      redirect:'/'
    },
    { // 通过重定向传参
      path:'/goParams/:newsId(\\d+)/:newsTitle',
      redirect:'/params/:newsId(\\d+)/:newsTitle',
    },
    { // 过度动画
      path:'/tran',
      components:{
        ntran:tran
      }
      
    },
    { // 找不到页面的时候
      path:'*',
      component:Error

    }
   
  ]
})
